<template>
    <div class="add">
        <div class="top">
            <div>{{ title }}</div>
            <DialogLayout22 :index="index" :list1="dataList2" :list2="dataList3" :title="iconTitle">
                <span class="df" @click="isShowAddHouse">
                    <img class="addImg" src="../../assets/images/add.svg">
                    <div style="font-size: 14px;white-space: nowrap;color: #6698ff;">{{ iconTitle }}</div>
                </span>
            </DialogLayout22>
        </div>
        <div class="at">
            <div class="at1" @click="resent" :class="selectName == $t('text.Neighbourhoods.l10') ? 'co' : ''">{{ $t("text.Neighbourhoods.l10") }}</div>

            <div class="at1" v-for="item in dataList " v-bind:key="item" @dblclick="clicks(item)" @click="clicks(item)"
                :class="selectName == item.areaName ? 'co' : ''">
                <DialogLayout22 isDb :value="item" isDetele :index="index" :list1="dataList2" :list2="dataList3"
                    :title="index == 1 ? $t('text.Neighbourhoods.l77') : index == 2 ? $t('text.Neighbourhoods.l78') : index == 3 ? $t('text.Neighbourhoods.l79') : ''">
                    {{ item.areaName }}</DialogLayout22>
            </div>

        </div>
    </div>
</template>
  

  
<script>
import DialogLayout22 from '../dialogLayout/DialogLayout22.vue'
export default {
    name: 'AddRegionList',
    emits: ['returnData', 'resent'],
    components: {
        DialogLayout22: DialogLayout22
    },
    props: {
        title: String,
        iconTitle: String,
        index: Number,
        dataList: Array,
        dataList2: Array,
        dataList3: Array,
        setSelectName: String
    },
    data() {
        return {
            selectName: this.$t("text.Neighbourhoods.l10")
        }
    },
    mounted() {

    },
    methods: {
        clicks(item) {
            this.selectName = item.areaName
            this.$emit('returnData', this.index, item)
        },
        resent() {
            this.selectName = this.$t("text.Neighbourhoods.l10")
            this.$emit('resent', this.index)
        }
    },
    watch: {
        setSelectName: {
            handler() {
                this.selectName = this.setSelectName
            }
        }
    },
    computed: {

    }

}

</script>


<style scoped>
.add {
    max-width: 250px;
    min-width: 200px;
    border-right: 2px solid #ececec;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin-bottom: 50px;
}

.top {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    margin: 0 20px;
    padding: 15px 0px;
}

.df {
    display: flex;
    align-items: center;
    margin-top: 2px;
    margin-bottom: 2px;
}

.addImg {
    width: 18px;
    height: 18px;
    padding-right: 3px;
}

.at {
    margin-left: 20px;
    overflow: auto;
    height: 100%;
    -webkit-user-select: none;
    /* Chrome, Safari, Opera */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently not supported by any browser */
}

.at1 {
    text-align: left;
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
    font-size: 13px;
    margin-right: 20px;
}

.co {
    color: #47b8e6;
}
</style>